<template>
	<div>
		<el-input v-model="showDeptName" :placeholder="placeholder">
			<template #append>
				<el-button :icon="Search" @click="deptDialog"></el-button>
			</template>
		</el-input>
		<el-input :model-value="modelValue" style="display: none"></el-input>
		<el-dialog :model-value="visibleDept" width="30%" :modal="false" :title="placeholder" :close-on-click-modal="false"
		           :close-on-press-escape="false">
			<el-form :inline="true">
				<el-form-item label="关键字：">
					<el-input v-model="filterText"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="default">查询</el-button>
				</el-form-item>
			</el-form>
			<el-tree
				class="filter-tree"
				:data="deptList"
				:default-expanded-keys="expandedKeys"
				:props="{ label: 'name', children: 'children' }"
				:expand-on-click-node="false"
				:filter-node-method="filterNode"
				:highlight-current="true"
				node-key="id"
				ref="treeRef">
			</el-tree>
			<template #footer>
				<el-button type="default" @click="cancelHandle()">取消</el-button>
				<el-button v-if="query" type="info" @click="clearHandle()">清除</el-button>
				<el-button type="primary" @click="commitHandle()">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>
<script setup>
import {nextTick, reactive, ref, toRefs, watch} from "vue";
import http from "../utils/request.js";
import {message} from "../utils/commonScript.js";
import {Search} from "@element-plus/icons-vue";


const emit = defineEmits(['update:deptName', 'update:modelValue'])
const filterText = ref('')
const visibleDept = ref(false)
const deptList = ref([])
const showDeptName = ref('')
const expandedKeys = ref(null)
const defaultProps = reactive({
	children: 'children',
	label: 'label'
})
const treeRef = ref()

const props = defineProps({
	modelValue: [Number, String],
	deptName: String,
	query: Boolean,
	placeholder: String
})
const {deptName} = toRefs(props)
const deptDialog = () => {
	expandedKeys.value = null
	if (treeRef.value) {
		treeRef.value.setCurrentKey(null)
	}
	visibleDept.value = true
	getDeptList(props.modelValue)
}
const filterNode = (value, data) => {
	if (!value) return true
	return data.name.indexOf(value) !== -1
}
const getDeptList = (id) => {
	return http.get('/sys/dept/list').then(({data: res}) => {
		if (res.code !== 0) {
			return message.error(res.msg)
		}
		deptList.value = res.data
		nextTick(() => {
			treeRef.value.setCurrentKey(id)
			expandedKeys.value = [id]
		})
	}).catch(() => {
	})
}
const cancelHandle = () => {
	visibleDept.value = false
	deptList.value = []
	filterText.value = ''
}
const clearHandle = () => {
	emit('input', '')
	emit('update:deptName', '')
	showDeptName.value = ''
	visibleDept.value = false
	deptList.value = []
	filterText.value = ''
}
const commitHandle = () => {
	const node = treeRef.value.getCurrentNode()
	if (!node) {
		message.error('请选择部门')
		return
	}
	emit('update:modelValue', node.id)
	emit('update:deptName', node.name)
	showDeptName.value = node.name
	deptList.value = []
	filterText.value = ''
	nextTick(() => {
		visibleDept.value = false
	})
}

watch(filterText, (val) => {
	treeRef.value.filter(val)
})
watch(deptName, (val) => {
	showDeptName.value = val
})
</script>
